<template>
  <div class="mainLayout">
    <div class="detectImage">
      <DetectCarSvg :dataList="cashData" :disabled="disabled"/>
    </div>
    <div class="detectList">
      <div>检测结果列表</div>
      <ul>
        <li
          v-for="(item,index) in list"
          :key="index"
        >{{item.carPosition}}:{{item.damageTypes}}</li>
      </ul>
    </div>
  </div>
</template>
<script>
import DetectCarSvg from './detectCarSvg';
export default {
  props: ["orderPickCarId", "data","disabled"],
  components: {
    DetectCarSvg,
  },
  data () {
    return {
      list: [],
      cashData: {},
      // checkItem: {
      //   carPosition: '',//	位置
      //   damageTypes: '',//	损害类型
      //   orderPickCarId: '',//接车单id
      // }
    }
  },
  watch: {
    data: {
      deep: true,
      handler (nV, oV) {
        if (Array.isArray(nV) && nV.length > 0) {
          nV.forEach(item => {
            this.$set(this.cashData,item.carPosition,item.damageTypes ? item.damageTypes.split(',') : [])
          })
        }
      }
    }
  },
  methods: {
    setData (value) {
      this.list = [];
      for (let item in value) {
        this.list.push({
          carPosition: item,
          damageTypes: value[item].join(','),
          orderPickCarId: this.orderPickCarId,
        })
      }
    }
  },

}
</script>
<style lang="scss" scoped>
.mainLayout {
  display: flex;
  width: 100%;
  .detectImage {
    flex: 1;
  }
  .detectList {
    flex: 1;
    font-weight: 700;
    font-size: 18px;
    ul {
      font-weight: normal;
      background-color: hsla(0, 0%, 94.9%, 0.5);
      list-style: none;
      margin: 0;
      padding: 0;
      height: 100%;
      li {
        margin-left: 5px;
        margin-top: 5px;
      }
    }
  }
}
</style>